<template>
    <div class="chaos-fenqu-middle">

        <chamNaviSecond @goNaciSecond="goNaciSecond"></chamNaviSecond>

        <div style="width:670px;margin-top:20px;min-height:400px;float:left;">
            <specialRecommendation></specialRecommendation>

            <div style="width:670px;margin-top:20px;min-height:174px;float:left;">

                <div style="width:100%;height:45px;margin-top:0px;border-bottom: 1px solid #e5e9ef;float:left;">
                    <h4 style="font-size: 24px;line-height: 24px;font-weight: 400;float:left;color: #222;">編輯精選</h4>
                </div>

                <template v-show="res.length>0" v-for="item in res">
                    <div v-bind:style="{'borderRight':item.videoIndex%2!=0?'1px solid #e5e9ef':''}"  style="width:calc(50% - 1px);height:150px;border-bottom: 1px solid #e5e9ef;float:left;" v-bind:key="item.videoIndex">
                        <videoInfo :video-info="item"></videoInfo>
                    </div>

                </template>

<!--                <div style="width:50%;height:150px;background-color:red;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:yellow;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:red;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:yellow;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:red;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:yellow;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:red;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:yellow;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:red;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
<!--                <div style="width:50%;height:150px;background-color:yellow;border-bottom: 1px solid #e5e9ef;float:left;"></div>-->
            </div>

            <!--這裏加一個分頁-->
            <div style="width:100%;float:left;margin-top:20px;">
                <!--页面底部分页效果-->
                <el-pagination style="margin:0 0 60px 60px;"
                               background
                               layout="total,prev, pager, next"
                               :page-size="10"
                               :total="1000">
                </el-pagination>
            </div>
        </div>
        <div style="width:324px;margin-top:20px;min-height:400px;float:left;">
            <reportThirdChild :reportIndex="1"></reportThirdChild>
        </div>

    </div>
</template>

<script>
    import reportSecondChild from "@/components/reportSecond/reportSecondChild";
    import reportThirdChild from "@/components/reportThird/reportThirdChild";
    import chamNaviSecond from "@/components/fenqu/chamNaviSecond";
    import specialRecommendation from '@/components/common/specialRecommendation'
    import showHoverMaskWithOutCharacters from "@/components/showHoverMaskWithOutCharacters";
    import videoInfo from '@/components/common/videoInfo'


    export default {
        name: "chaosFanjuChildMiddle",
        components:{videoInfo,reportSecondChild,reportThirdChild,chamNaviSecond,showHoverMaskWithOutCharacters,specialRecommendation},
        data(){
            return{
                paigangbangForm:{
                    fenquParent:'',
                    is1day:'1',
                    is3day:'0',
                    is7day:'0'
                },
                res:[]
            }
        },
        created(){
            var self = this;
            self.paigangbangForm.fenquParent = "01-fanju";
            //查找动漫区前11的视频
            self.$api.post('paihangbang/getPaihangbangTop11',self.paigangbangForm, result => {
                self.res = result;
            });
        },
        methods:{
            goNaciSecond(index){
                this.$store.commit('setNavigateSelectIndex', 1);
                if(index==0){
                    this.$router.push('/chaosFanju');
                    // this.$store.commit('setNavigateSelectIndex', 1);
                    // this.$store.commit('setNaviSecondSelectIndex', 0);
                }
                if(index!=0){
                    this.$router.push('/lianzaidonghua');
                }

            }
            // goFanjuChild(){
            //     this.$router.push('/fanjuChild');
            // }
        }
    }
</script>

<style scoped>
    .chaos-fenqu-middle{
        width:999px;
        min-height:500px;
        margin:auto auto;
    }
</style>
